<template>
  <div class="booksBox">
    <h1 class="title">文章管理</h1>
    <div class="tableBox">
      <el-table :data="tableData" border :row-class-name="rowClassName" height="550">
        <el-table-column prop="bid" label="ID" align="center"/>
        <el-table-column prop="name" label="Name" align="center"/>
        <el-table-column
            prop="category"
            label="类别"
            align="center"
            :filters="categoryList"
            :filter-method="screenCategory"
        />
        <el-table-column align="center">
          <template #header>
            <div class="tableHeader">
              <el-input v-model="search" placeholder="输入文章名" size="small"/>
              <el-button size="small" @click="goAddBook('')">添加</el-button>
            </div>
          </template>
          <template #default="scope">
            <el-button size="small" @click="goAddBook(scope.row.bid)">修改</el-button>
            <el-button size="small" type="danger" @click="deleteBook(scope.row.bid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
  import {onBeforeMount,reactive,ref,computed} from "vue";
  import {ElMessage} from "element-plus"
  import {useRouter} from "vue-router"
  import {http} from "../config/axios/index.js"

  //文章列表
  const booksList = reactive([])

  //类别列表
  const categoryList = reactive([])

  //路由对象
  const router = useRouter()

  //获取数据
  async function getData(){
    let type = "error"
    const res = await http({
      method: "GET",
      url: "article/get_article"
    })
    if(res.data.code === 0){
      type = "success"
      //表格数据
      booksList.push(...res.data.data.articleList)
      //分类筛选项
      const categoryArr = []
      booksList.map(item=>{
        categoryArr.push(item.category)
      })
      Array.from(new Set(categoryArr)).map(item=>{
        categoryList.push({text: item,value: item})
      })
    }
    //提示消息
    ElMessage({
      showClose: true,
      message: res.data.msg,
      center: true,
      type
    })
  }

  //筛选分类
  function screenCategory(value,row){
    return row.category === value
  }

  //筛选表格显示的数据
  let search = ref("")
  const tableData = computed(()=>{
    return booksList.filter(item=>{
      return search.value !== "" ? item.name.includes(search.value) : true
    })
  })

  //前往添加文章
  function goAddBook(id){
    router.push({
      name: "AddBooks",
      query: {
        id,
      }
    })
  }

  //给删除项添加隐藏类名
  const hideList = reactive([])
  function rowClassName({row}){
    let isHide = hideList.some(item=>{
      return row.bid === item
    })
    return isHide ? "hide" : ""
  }

  //删除文章
  async function deleteBook(id){
    let type = "error"
    const res = await http({
      method: "GET",
      url: `article/delete_article`,
      params: {
        bid: id
      }
    })
    if(res.data.code === 0){
      hideList.push(id)
      type = "success"
    }
    ElMessage({
      showClose: true,
      message: res.data.msg,
      center: true,
      type
    })
  }

  //组件挂载前
  onBeforeMount(()=>{
    getData()
  })

</script>

<style scoped>
  .booksBox{
    width: 100%;
    padding: 20px;
  }

  .tableBox{
    padding-top: 20px;
  }
  .tableHeader{
    display: flex;
  }
  :deep(.hide){
    display: none;
  }

</style>